<template>
  <div class="search-box">
    <i class="icon-search-normal"></i>
    <input ref="querry" type="text" :placeholder="placeholder" v-model="querry" class="box" >
    <i class="icon-delete-normal" v-show="querry" @click="clear"></i>
  </div>
</template>

<script>
import {debounce} from "commom/js/until.js"
export default {
  data(){
    return{
      querry:'',
    }
  },
  props:{
    placeholder:{
      typr:String,
      default:"搜索歌曲、歌手"
    }
  },
  methods:{
    clear(){
      this.querry = "";
    },
    blur(){
      this.$refs.querry.blur();
    },
    setQuerry(querry){
      this.querry = querry
    }
  },
  created(){
    this.$watch('querry',debounce((newval)=>{
      this.$emit('querry',newval)
    },200))
  }
}
</script>

<style lang="stylus" scoped>
@import "~commom/stulys/variable.styl"
.search-box
  display flex
  padding 0 6px
  align-items center
  width 100%
  border-radius 6px
  box-sizing border-box
  background $color-highlight-background
  height 40px
  .icon-search-normal
    font-size 20px
    color $color-background 
  .icon-delete-normal
    font-size 16px
    color $color-background 
  .box
    flex:1
    line-height 18px
    background $color-highlight-background
    color $color-text
    margin 0 9px
    font-size $font-size-medium
    outline 0
    &::placeholder
      color $color-text-d
</style>